<template>
    <div class="main">
        <van-nav-bar   left-arrow>
            <template #title>
                <p style="font-size:21px; font-weight:700;">登录易点云</p>
            </template>
            <template #left>
                <router-link to="/">
                    <van-icon  click-left="" name="arrow-left" size="24" color="#999"/>
                </router-link>                               
            </template>
        </van-nav-bar>


        <van-tabs v-model="active" line-width="108px" color='#3aa3ff' line-height="3px" tabs-line-height="60px" >
            <van-tab  title="手机快速登录" title-style="color:#666d71;font-size:18px;" style="box-sizing:border-box">
                <van-cell-group >
                    <van-field v-model="value" 
                    style="font-size:18px; padding: 16px 28px; border-bottom: 1px solid #ccc;" 
                    label="手机号码" 
                    placeholder="请输入手机号"
                     />
                </van-cell-group>

                <van-field
                    v-model="sms"
                    center
                    clearable
                    style="font-size:18px; padding: 16px 28px; border-bottom: 1px solid #ccc;"
                    label="短信验证码"
                    placeholder="请输入短信验证码"
                >
                <template #button>
                    <button style="color:#169de1;">发送验证码</button>
                </template>
                </van-field>
                
            </van-tab>

            <van-tab  title="账号密码登录" title-style="color:#666d71;font-size:18px;" style="box-sizing:border-box">
                <van-cell-group >
                    <van-field v-model="ruleForm.username" 
                    style="font-size:18px; padding: 16px 28px; border-bottom: 1px solid #ccc;" 
                    label="账号" 
                    placeholder="请输入账号"
                     />
                    <van-field v-model="ruleForm.password" 
                    style="font-size:18px; padding: 16px 28px; border-bottom: 1px solid #ccc;" 
                    label="密码" 
                    placeholder="请输入密码号"
                    type="password"
                     />
                </van-cell-group>

            </van-tab>
            
        </van-tabs>
        <button class="phonelogin" @click="handleLogin(ruleForm)">立即登录</button>
        <div class="btnbox">
        <router-link to="/register">立即注册</router-link>
        <a href="#">忘记密码</a>
        </div>
        




    </div>
</template>

<script>
    import Vue from 'vue';
    import { NavBar } from 'vant';
    import { Tab, Tabs } from 'vant';
    import { Field } from 'vant';
    import { Button } from 'vant';
    import { Card } from 'vant';

    Vue.use(Card);
    Vue.use(Button);
    Vue.use(Field)
    Vue.use(Tab);
    Vue.use(Tabs);
    Vue.use(NavBar);
    // Vue.component('van-nav-bar',
    // { template:`
    // <h2 name="title">插槽</h2>
    // `})
        
    export default {
        data() {
            return {
                active: 0,
                sms:'',
                value:'',
                ruleForm: {
                    username: '张三丰',
                    password: '123',
                },
                target:'/'   //登录成功后跳转的路径
            }
        },
        created () {
            console.log(this.$route);   //提取路由参数
            let {target}=this.$route.query   //解构出query里的target
            if(target){
                this.target=target   //记录用户想要跳转的目的地
            }
        },
        methods: {           
            handleLogin(i){
                console.log(i)
                this.$store.dispatch('user/userLoginAct',{
                obj:this.ruleForm,   //账号密码
                target:this.target   //登录成功后跳转目标路径
                })
            }           
        },

    }
</script>
<style lang="css" src="../assets/css/reset.css" scoped></style>
<style lang="css" src="../assets/css/login.css" scoped></style>
<style lang="scss" scoped>
    .titletext{
        color: red;
    }
</style>